import 'package:flutter/material.dart';
import 'package:smart_shop/pages/cart/index.dart';
import 'package:smart_shop/pages/category/index.dart';
import 'package:smart_shop/pages/home/index.dart';
import 'package:smart_shop/pages/mine/index.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  State<TabBarPage> createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> {
  // 当前选中的索引
  int activeIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 索引栈
      body: IndexedStack(
        index: activeIndex, // 当前选中的索引
        children: const [
          HomePage(), // 首页
          CategoryPage(), // 分类
          CartPage(), // 购物车
          MinePage(), // 我的
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red, // 选中颜色
        unselectedItemColor: Colors.grey, // 未选中颜色
        type: BottomNavigationBarType.fixed, // 底部导航栏类型
        currentIndex: activeIndex, // 当前选中的索引
        onTap: (int index) {
          // 点击Tab时更新 数据和视图
          setState(() {
            activeIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Image.asset(
              'tabbar/home.png',
              width: 32,
              height: 32,
            ),
            activeIcon: Image.asset(
              'tabbar/home-active.png',
              width: 32,
              height: 32,
            ),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              'tabbar/cate.png',
              width: 32,
              height: 32,
            ),
            activeIcon: Image.asset(
              'tabbar/cate-active.png',
              width: 32,
              height: 32,
            ),
            label: '分类',
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              'tabbar/cart.png',
              width: 32,
              height: 32,
            ),
            activeIcon: Image.asset(
              'tabbar/cart-active.png',
              width: 32,
              height: 32,
            ),
            label: '购物车',
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              'tabbar/user.png',
              width: 32,
              height: 32,
            ),
            activeIcon: Image.asset(
              'tabbar/user-active.png',
              width: 32,
              height: 32,
            ),
            label: '我的',
          ),
        ],
      ),
    );
  }
}
